<template>
  <div>
    <div id="container"></div>
    <div class="bg">
      <HeadBox title="政务服务"></HeadBox>
      <slot></slot>
    </div>
    <div id="maptools">
      <ul class="bar">
        <li @mouseover="handleOver()">
          <i class="icon icon-layer"> </i>
          <div class="menu-drop-wrap" ref="menuDropRef" @mouseout="handleOut()">
            <ul class="menu-list">
              <li v-for="item in mapDropdownList" :key="item.name">
                <el-checkbox
                  v-model="item.isCheck"
                  @change="changeCheckBox($event, item.typeId)"
                /><span>{{ item.name }} {{ item.nums }}</span>
              </li>
            </ul>
          </div>
        </li>
        <li><i class="icon icon-point"></i></li>
        <li><i class="icon icon-plug" @click="handlePlug(1)"></i></li>
        <li><i class="icon icon-reduce" @click="handlePlug(2)"></i></li>
      </ul>
    </div>
		<info-window v-if="showDetail" :title="detail.name" @close="showDetail = false">
			<info-window-item label="地址：" :value="detail.address"></info-window-item>
			<info-window-item label="开放时间：" :value="detail.business"></info-window-item>
			<info-window-item label="详情：" :value="detail.description"></info-window-item>
			<info-window-item label="联系电话：" :value="detail.mobile"></info-window-item>
		</info-window>
  </div>
</template>

<script>
import AMap from "@/js/AMap.js";
import areaData from "@/assets/js/area.js";
import AMapLoader from "@amap/amap-jsapi-loader";
import InfoWindow from "@/components/info-window/index.vue";
import InfoWindowItem from "@/components/info-window/item.vue";
export default {
  name: "MapContainer",
	components: {
		InfoWindow,
		InfoWindowItem
	},
  data() {
    return {
			showDetail: false,
			detail: {},
      mapDropdownList: [
        {
          isCheck: true,
          typeId: 8,
          name: "政务服务自助终端网点",
          nums: 6,
          data: [],
        },
        {
          isCheck: true,
          typeId: 9,
          name: "市区级",
          nums: 1,
          data: [],
        },
        {
          isCheck: true,
          typeId: 10,
          name: "镇街级",
          nums: 10,
          data: [],
        },
      ],
      maskFlag: false,
      jiantouFlag: "icon-jiantouxia-copy",
      map: null,
      longitude: 120.432144, // initLng
      latitude: 36.147497, // initLat
      center: [120.432144, 36.147497],
      circle: null,
      marker: null,
      zoom: 13,
      radius: 3,
      locationaddr: "市民中心",
      locationList: [],
      yinhangOpacityFlag: 1,
      banshiOpacityFlag: 1,

      typeId: null,
      type: [8, 9, 10],

      noSearchData: true,
      resAmap: null,
      markerList: [],
    };
  },
  created() {
    //DOM初始化完成进行地图初始化
    this.initMap();
  },
  methods: {
    // 鼠标移入
    handleOver() {
      this.$refs.menuDropRef.style.display = "block";
    },
    // 鼠标移出
    handleOut() {
      this.$refs.menuDropRef.style.display = "none";
    },
    // 鼠标放大缩小
    handlePlug(type) {
      if (type === 1) {
        this.map.zoomIn();
      } else {
        this.map.zoomOut();
      }
    },
    // 监听复选框
    changeCheckBox(val, typeId) {
      let type = this.type;
      if (val) {
        type.push(typeId);
      } else {
        type.splice(type.indexOf(typeId), 1);
      }
      this.type = type;
      this.getPoint(val, typeId);
    },
    getPoint(val, typeId) {
      this.map.remove(this.markerList);
      this.$get("/zw/map/page", {
        limit: 1000,
        page: 1,
        typeId: this.type.join(","),
      }).then((res) => {
        // 创建一个 Marker 实例：
        res.data.list.map((item) => {
          let marker = new this.resAmap.Marker({
            icon: item.icon,
            position: [item.lng, item.lat],
            title: item.name,
						extData: item
          });
          marker.on("click", (e) => {
          // var left = e.pixel.x;
          // var top = e.pixel.y;
            this.detail = item
            this.showDetail = true
          });
          this.map.add(marker);
          // 将创建的点标记添加到已有的地图实例：
        });
        
      });
    },
    async initMap() {
      try {
        this.resAmap = await AMap();

        this.map = new this.resAmap.Map("container", {
          center: this.center, // 地图中心点
          resizeEnable: true,
          zoom: this.zoom,
          lang: "ch",
          keyboardEnable: true,
          loaded: false,
        });
        //定义点击展示一些信息的窗体
        this.infoWindow = new this.resAmap.InfoWindow({
          offset: new this.resAmap.Pixel(45, -20), //设置偏移量
        });
				this.getPoint()
      } catch (e) {
        console.error(e);
      }
    }
  },
};
</script>

<style lang="less" scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100vh;
}
.bg {
  background: url(../assets/image/bg.png);
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: 997;
}
#maptools {
  z-index: 999;
  position: absolute;
  width: 236px;
  height: 37px;
  left: 30%;
  top: 114px;
  background: radial-gradient(
    520.22% 81.31% at 50% 50%,
    rgba(1, 46, 81, 0.23) 0,
    rgba(3, 96, 169, 0.23) 100%
  );
  border: 1px solid #153c62;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: inset 0 0 5px 5px #071c32;
  box-shadow: inset 0 0 5px 5px #071c32;
  .menu-drop-wrap {
    position: absolute;
    display: none;
    background: rgba(7, 45, 78, 0.5);
    border: 1px solid #153c62;
    padding: 5px 10px;
    height: 200px;
    top: 40px;
    ul.menu-list {
      li {
        padding: 3px 0;
        font-size: 14px;
        font-style: normal;
        color: #fff;
        text-align: left;
        width: 100%;
        cursor: pointer;
      }
      .el-checkbox {
        margin-right: 10px;
      }
    }
  }
  .bar {
    display: flex;
    align-items: center;
    padding-top: 6px;
    li {
      width: 25%;
    }
    .icon {
      position: relative;
      display: inline-block;
      cursor: pointer;
      width: 22px;
      height: 22px;
      background-size: contain;
    }
    .icon-layer {
      background: url("../assets/image/icon/icon1.png") top no-repeat;
    }
    .icon-point {
      background: url("../assets/image/icon/icon2.png") top no-repeat;
    }
    .icon-plug {
      background: url("../assets/image/icon/icon3.png") top no-repeat;
    }
    .icon-reduce {
      background: url("../assets/image/icon/icon4.png") top no-repeat;
    }
  }
}
</style>
<style>
.amap-icon {
  overflow: inherit !important;
}
</style>